<template>
  <div class="box">{{ a + b }} {{ t.a }}</div>
  <div>
    <button @click="add">添加</button>
    <componentA :x="a" :y="b"></componentA>
    <div v-if="testObj.show">是否显示</div>
    <div class="tabs" style="display:flex;">
      <div v-for="(item, index) in list" :key="index" class="tab-item">
        <div class="parent" :class="{ on: item.selected }">{{ item.name }}</div>
        <div class="child" v-for="(v, i) in item.children" @click="onSelect(item, v)" :class="{ on: v.selected }">{{ v.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import component from './241121/component.vue'
import { ref } from 'vue'
const t = {
  a: ref(1),
  b: 2
}
const d = {
  a: ref(1),
  b: 2,
  add() {
    console.log(`helloworld`)
  }
}
export default {
  components: {
    componentA: component
  },
  setup(props, { attrs, slots, emit, expose }) {
    console.log(props, 'props')
    return {
      t
    }
  },
  data() {
    return {
      a: 1,
      b: 2,
      d: null,
      list: [
        {
          name: 'A',
          value: 1,
          children: [
            {
              name: 'A-1'
            },
            {
              name: 'A-2'
            },
            {
              name: 'A-3'
            }
          ]
        },
        {
          name: 'B',
          value: 2,
          children: [
            {
              name: 'B-1'
            },
            {
              name: 'B-2'
            },
            {
              name: 'B-3'
            }
          ]
        },
        {
          name: 'C',
          value: 3,
          children: [
            {
              name: 'C-1'
            },
            {
              name: 'C-2'
            },
            {
              name: 'C-3'
            }
          ]
        }
      ],
      testObj: {
        a: 1
      },
      testShow: false
    }
  },
  methods: {
    onSelect(parent, item) {
      if (item.selected) {
        item.selected = false
        parent.selected = false
      } else {
        this.list.forEach((res) => {
          res.selected = false
          res.children.forEach((res) => (res.selected = false))
        })
        item.selected = true
        parent.selected = true
      }
    },
    add() {
      console.log(`helloworld`)
      this.a++
      console.log(this.testObj)
      this.testObj.show = !this.testObj.show
      console.log(this.testObj.show)
      console.log(this.testShow)
    }
  },
  mounted() {
    console.log(this.t)
    this.d = d
    console.log(this.d)
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.child,
.parent {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  &.on {
    border: 1px solid #000;
  }
}
</style>
